<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script>
        function $(id){
            return document.getElementById(id);
        }

        function checkName(){
            //向服务器发送ajax的GET请求，第一个参数为请求服务器的URL路径
            axios.get("/user/checkName",{
                params:{
                    name: $("userName").value
                }
            }).then(resp => { //处理响应信息
                //得到服务器发送给客户端的数据
                var info = resp.data;
                if(info == "no"){
                    $("infoSpan").style.color = "red";
                    $("infoSpan").innerHTML = "该用户已注册";
                }
                else {
                    $("infoSpan").style.color = "green";
                    $("infoSpan").innerHTML = "可以使用";
                }
            });
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="userName" onblur="checkName()">
    <span id="infoSpan"></span><br>
    电话：<input type="text" id="phone">

</body>
</html>